<!-- 这是首页的组件 -->
<template>
  <div class="container">
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in swiperList" :key="item.id">
        <img :src="item.img" alt="">
      </van-swipe-item>
    </van-swipe>
    <!-- 宫格效果 -->
    <van-grid :border="false" :column-num="3" clickable>
      <van-grid-item to="/newslist">
        <img src="../assets/images/menu1.png" alt="">
        <span>新闻资讯</span>
      </van-grid-item>
      <van-grid-item to="/photo/list">
        <img src="../assets/images/menu2.png" alt="">
        <span>图片分享</span>
      </van-grid-item>
      <van-grid-item to="/goodslist">
        <img src="../assets/images/menu3.png" alt="">
        <span>商品购买</span>
      </van-grid-item>
      <van-grid-item>
        <img src="../assets/images/menu4.png" alt="">
        <span>留言反馈</span>
      </van-grid-item>
      <van-grid-item>
        <img src="../assets/images/menu5.png" alt="">
        <span>视频专区</span>
      </van-grid-item>
      <van-grid-item>
        <img src="../assets/images/menu6.png" alt="">
        <span>联系我们</span>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
export default {
  data () {
    return {
      swiperList: []
    }
  },
  methods: {
    async getSwiperList () {
      const ret = await this.$http.get('/api/getlunbo')
      if (ret.data.status !== 0) {
        return this.$toast('获取数据失败')
      }
      this.$toast('获取数据成功')
      this.swiperList = ret.data.message
    },
    // 去商品列表
    goShop () {
      console.log(11)
      this.$router.push('/photo/list')
    }
  },
  created () {
    this.getSwiperList()
  }
}
</script>

<style scoped lang="less">
.van-swipe {
  width: 100%;
  height: 200px;
  background-color: #ccc;
  img {
    width: 100%;
    height: 100%;
  }
}
.van-grid-item {
  width: 33%;
  img {
    width: 60px;
    height: 60px;
  }
}
.container {
  margin-top: 40px;
  padding-bottom: 50px;
}
</style>
